<template>
  <div class="selected-search-params" curPageName="6654354545reerterf567ab">
    <div class="search-params-header">已选条件：</div>

    <div class="search-params-body">
      <template v-for="[key, item] in Object.entries(modelValue)" :key="key">
        <div class="item-params" v-if="isshowBlock(item.value)">
          <!-- {{ item[label] }}：<span>{{item.text}}{{ formatArray(item, item.value) }}</span> -->
          <el-tooltip class="box-item" effect="dark" :content="formatArray(item, item.value)" placement="top-start">
            <span class="item-params-text"
              >{{ item[label] }}： <span>{{ formatArray(item, item.value) }} </span></span
            >
          </el-tooltip>
          <span class="close-params" @click="clickItem(key)">
            <el-icon> <CircleCloseFilled /> </el-icon>
          </span>
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, withDefaults, watchEffect, watch, nextTick, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  // modelValue: {
  //   type: Object
  // },
  label: {
    type: String,
    default: "label"
  },
  val: {
    type: [String, Array],
    dafault: "value"
  },
  optionKey: {
    type: [String, Object],
    dafault: () => {}
  }
});

const modelValue = defineModel<object>({ default: {} });

watch(
  () => modelValue,
  value => {}
);

//字段类型
const formType = {
  date: item => {
    return item.value;
  },
  datePicker: item => {
    return item.value;
  },
  input: item => {
    return item.value;
    item["text"] = item.value;
  },
  select: item => {
    //默认适配多选
    // item["text"] = item.value;

    let value = !Array.isArray(item.value) ? [item.value] : item.value;
    let descList = [];
    let options = item?.options ?? [];

    if (options.length) {
      //有options 数据

      value.map(itemValue => {
        let index = item.options.findIndex(item => item.value == itemValue);

        if (index != -1) {
          descList.push(item.options[index]?.label ?? itemValue);
        }
      });
      return descList.join(",");
      item["text"] = descList.join(",");
    } else {
      //没有options数据 直接赋值
      return item.value;
      item["text"] = item.value;
    }
  },
  radio: item => {
    let value = !Array.isArray(item.value) ? [item.value] : item.value;
    let descList = [];
    let options = item?.options ?? [];

    if (options.length) {
      //有options 数据

      value.map(itemValue => {
        let index = item.options.findIndex(item => item.value == itemValue);

        descList.push(item.options[index]?.label ?? itemValue);
      });
      return descList.join(",");
      item["text"] = descList.join(",");
    } else {
      //没有options数据 直接赋值
      return item.value;
      item["text"] = item.value;
    }
  },
  dateTimeRange: item => {
 
    //时间范围、日期
    //这里只支持数组，参考element UI 时间控件 value
    item = JSON.parse(JSON.stringify(item.value));
    return item.join(` ${proxy.$t("merak.rangto")} `);
  }
};

// emit
const $emit = defineEmits(["clickItem"]);

// methods
const clickItem = key => {
  // if (Array.isArray(params.value)) {
  //   params.value = [];
  // } else {
  //   params.value = "";
  // }
  // console.log(params);
  const value = { ...modelValue.value };
  value[key].value = undefined;
  modelValue.value = value;

  // params.value = "";
};

//filter

const formatArray = (item, value) => {
  console.log(item);
  let desc = "";
  // if(!(item.value?.length??0)&&!(item?.text?.length??0)){//空字符串，空数据 直接去 text 字段
  // desc=item.text;
  // }
  let options = item?.options ?? [];
  // console.log(formType[item?.type ?? "input"]);

  return (desc = formType[item?.type ?? "input"](item));
};

const isshowBlock = value => {
  let newV = Array.isArray(value) ? value : [value];
  if (String(newV).length) {
    return true;
  }
  return false;
};
</script>

<style lang="scss" scoped>
.selected-search-params {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: sticky;
  top: 0px;
  left: 0px;
  min-height: 30px;
  margin: 0px 0px 20px;
  padding: 20px 20px;
  border: 1px dashed #e6e6ee;
  gap: 16px;
  z-index: 100;
  background:var(--el-bg-color);

  .search-params-body {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;

    .item-params {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 4px 15px;
      font-size: 12px;
      background: #f8f9fa;
      color: #646567;
      border: 1px solid #e6e6ee;
      border-radius: 2px;

      .close-params {
        position: absolute;
        right: -7px;
        top: -10px;
        font-size: 15px;
        color: $red;
        cursor: pointer;
      }

      span {
        overflow: hidden;
        display: inline-block;
        max-width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .item-params-text {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
